<template>
	<view class="task-index-container">
		<view class="task-index-nav">
			<view class="nav-item" v-for="(item,index) in taskNavList" :key="index" @click="navItemClick(item.path)">
				<view class="item-img">
					<image :src="item.src"></image>
				</view>
				<text class="item-text">{{item.title}}</text>
			</view>
		</view>
		<view class="my-task">
			<text style="font-size: 36rpx;color: #333;">我的任务</text>
			<view class="more" @click="goMoreTask">查看更多</view>
		</view>
		<task-list :isMargin="false" v-if="taskList.length" :task-list="taskList"></task-list>
		<view v-else>
			<van-empty description="暂无任务" />
		</view>
		<!-- <uni-load-more v-if="taskList.length >= 5" :status="status" /> -->
	</view>
</template>

<script>
	import TaskList from '@/components/taskList.vue'
	export default {
		components: {
			TaskList
		},
		data() {
			return {
				allList: [],
				ticketStatus: [1, 2, 3],
				status: 'more',
				params: {
					执行人id: null,
					isAll: 1,
					pagination: { current: 1, pageSize: 10 },
					sorter: { field: "created_at", order: 0 }
				},
				taskList: [],
				taskNavList: [{
						src: '../static/1.png',
						title: '我创建的',
						path: '/taskSystem/list/list?type=create'
					},
					{
						src: '../static/2.png',
						title: '我参与的',
						path: '/taskSystem/list/list?type=join'
					},
					{
						src: '../static/3.png',
						title: '新建任务',
						path: '/taskSystem/createTask/createTask'
					}
				]
			}
		},
		onLoad() {
			this.getTaskList()
		},
		onReachBottom() {
			// if(this.status !== 'noMore' && this.taskList.length >= 5 ) {
			// 	this.status = 'loading'
			// 	this.getMoreTask()
			// }
			console.log('上拉加载')
		},
		methods: {
			getTaskList() {
				uni.showLoading({
					mask: true
				})
				this.params.执行人id = uni.getStorageSync('userInfo').id
				this.$http.post('taskSystem/task/list', this.params).then(res => {
					console.log(res)
					if(res.code === 10000) {
						this.taskList = res.data.list || []
						this.taskList = this.taskList.filter(item => this.ticketStatus.includes(item['任务状态']))
					}
				})
			},
			// getMoreTask() {
			// 	this.params.pagination.current++
			// 	this.$http.post('taskSystem/task/list', this.params).then(res => {
			// 		console.log(res)
			// 		if(res.code === 10000) {
			// 			if (res.data.list !== null) {
			// 				this.allList = [...this.allList, ...res.data.list]
			// 				const list = res.data.list.filter(item => this.ticketStatus.includes(item['任务状态']))
			// 				this.taskList.concat(list)
			// 			}
			// 			// this.checkList = this.checkList.concat(res.data.list)
			// 			if (this.allList.length === res.data.total) {
			// 				this.status = 'noMore'
			// 			}
			// 		}
			// 	})
			// },
			navItemClick(url) {
				uni.navigateTo({
					url
				})
			},
			goMoreTask() {
				uni.navigateTo({
					url: '/taskSystem/list/list'
				})
			}
		}
	}
</script>

<style lang="scss">
	.van-empty {
		height: 890rpx;
	}
	.task-index-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	.task-index-nav {
		width: 750rpx;
		height: 200rpx;
		background-color: #fff;
		// background-color: pink;
		border-bottom: 20rpx solid #f5f5f5;
		display: flex;
		flex-wrap: wrap;
		// border-bottom: 2rpx solid #f5f5f5;
	
		// background-color: pink;
		.nav-item {
			flex: 33.33%;
			// width: rpx;
			height: 160rpx;
			padding: 0 20rpx;
			align-items: center;
			.item-img {
				width: 80rpx;
				height: 80rpx;
				margin: 23rpx 0 10rpx 56rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.item-text {
				margin-left: 36rpx;
				font-size: 30rpx;
			}
		}
	}
.my-task {
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 38rpx 0 18rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #eee;
			.more {
				color: #999;
				font-size: 28rpx;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					top: 12rpx;
					right: -16rpx;
					width: 16rpx;
					height: 16rpx;
					border-top: 2rpx solid #999;
					border-right: 2rpx solid #999;
					transform: rotate(45deg);
				}
			}
		}
</style>
